fix: update string input value in real-time by dinakars777 · Pull Request #603 · pmndrs/leva

dinakars777 · 2026-03-16T20:23:34Z

Summary

Previously, string inputs in Leva only committed changes to the store when the input lost focus (on blur). This meant that useEffect hooks depending on the value would only fire after clicking away from the input.

This fix makes onUpdate fire on every keystroke, so the store value updates in real-time.

Changes

Modified ValueInput.tsx to call both onChange and onUpdate on every onChange event
This affects both text inputs and textareas

Testing

Build passes successfully. The change maintains backward compatibility - onUpdate was already being called on blur, and now it's also called on every keystroke.

Fixes #599

Summary by CodeRabbit

Release Notes

Bug Fixes
- Fixed value input callback handling so that updates for non-numeric inputs now consistently trigger both the immediate change callback and the update callback. This ensures external listeners receive updates reliably when values are modified via the input.

changeset-bot · 2026-03-16T20:23:39Z

⚠️ No Changeset found

Latest commit: 5b335d2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2026-03-16T20:23:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
leva	Ready	Preview, Comment	Mar 16, 2026 8:37pm

codesandbox-ci · 2026-03-16T20:25:38Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 5b335d2:

Sandbox	Source
leva-minimal	Configuration
leva-busy	Configuration
leva-scroll	Configuration
leva-advanced-panels	Configuration
leva-ui	Configuration
leva-theme	Configuration
leva-transient	Configuration
leva-plugin-plot	Configuration
leva-plugin-bezier	Configuration
leva-plugin-spring	Configuration
leva-plugin-dates	Configuration
leva-custom-plugin	Configuration

coderabbitai · 2026-03-16T20:29:21Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2b983687-9dd1-4a55-98af-ac661c9ef69f

📥 Commits

Reviewing files that changed from the base of the PR and between 8470ecd and 5b335d2.

📒 Files selected for processing (1)

packages/leva/src/components/ValueInput/ValueInput.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

packages/leva/src/components/ValueInput/ValueInput.tsx

📝 Walkthrough

Walkthrough

The ValueInput onChange handler now calls onChange(value) and — for non-'number' types — also calls onUpdate(value) on every input change, ensuring the updater is invoked during typing rather than only on blur or Enter.

Changes

Cohort / File(s)	Summary
ValueInput onChange Handler `packages/leva/src/components/ValueInput/ValueInput.tsx`	Wrapped the onChange callback so that on every input change it invokes `onChange(value)` and, when `type !== 'number'`, additionally invokes `onUpdate(value)`. Blur/Enter and existing update paths remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 Tap-tap on keys, I nibble and write,
No need to wait for the blur of the light.
I whisper each letter as soon as it's made,
A hopping update — no pause in the trade! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the main change: enabling real-time updates for string input values, which directly addresses the primary objective of fixing delayed propagation of string input changes.
Linked Issues check	✅ Passed	The code change directly addresses issue `#599` by calling onUpdate on every onChange event for text inputs, enabling real-time store updates and immediate notification to consumers like useEffect hooks.
Out of Scope Changes check	✅ Passed	All changes are scoped to ValueInput.tsx and directly related to fixing real-time updates for string inputs; no unrelated or out-of-scope modifications are present.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📝 Coding Plan

Generate coding plan for human review comments

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can generate a title for your PR based on the changes with custom instructions.

Set the reviews.auto_title_instructions setting to generate a title for your PR based on the changes in the PR with custom instructions.

coderabbitai

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/leva/src/components/ValueInput/ValueInput.tsx`:
- Around line 87-90: The current onChange handler in ValueInput unconditionally
calls onUpdate(value) on every keystroke which causes NumberInput (which reuses
ValueInput) to also commit on each keystroke; change the handler in ValueInput
so it only calls onUpdate for string inputs (e.g., check props.inputType !==
'number' or typeof value === 'string') and leave numeric inputs to retain their
original commit semantics; update the onChange={(value) => { onChange(value); if
(<guard-for-non-number-or-string>) onUpdate(value); }} logic so NumberInput
behavior is unchanged while string realtime updates remain.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 148ee752-814f-4729-b100-0ebea143c9bd

📥 Commits

Reviewing files that changed from the base of the PR and between 402a1e9 and 8470ecd.

📒 Files selected for processing (1)

packages/leva/src/components/ValueInput/ValueInput.tsx

packages/leva/src/components/ValueInput/ValueInput.tsx

Previously, string inputs only committed changes to the store on blur. This change makes onUpdate fire on every keystroke for string inputs only - number inputs retain their original commit behavior (on blur/enter).

vercel bot deployed to Preview March 16, 2026 20:24 View deployment

coderabbitai bot reviewed Mar 16, 2026

View reviewed changes

packages/leva/src/components/ValueInput/ValueInput.tsx Show resolved Hide resolved

fix: update string input value in real-time

5b335d2

Previously, string inputs only committed changes to the store on blur. This change makes onUpdate fire on every keystroke for string inputs only - number inputs retain their original commit behavior (on blur/enter).

dinakars777 force-pushed the fix/string-input-realtime-update branch from 8470ecd to 5b335d2 Compare March 16, 2026 20:36

vercel bot deployed to Preview March 16, 2026 20:37 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update string input value in real-time#603

fix: update string input value in real-time#603
dinakars777 wants to merge 1 commit intopmndrs:mainfrom
dinakars777:fix/string-input-realtime-update

dinakars777 commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Mar 16, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 16, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

dinakars777 commented Mar 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Testing

Summary by CodeRabbit

Release Notes

Uh oh!

changeset-bot bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codesandbox-ci bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Mar 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

dinakars777 commented Mar 16, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 16, 2026 •

edited

Loading

vercel bot commented Mar 16, 2026 •

edited

Loading

codesandbox-ci bot commented Mar 16, 2026 •

edited

Loading

coderabbitai bot commented Mar 16, 2026 •

edited

Loading